import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Button',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyStatelessWidget(),
    );
  }
}

class MyStatelessWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    //定义文本样式

    return Scaffold(
      appBar: AppBar(
        title: Text("Button"),
      ),
      body:
      /*Flex(
        //方向:横向Axis.horizontal
        direction: Axis.horizontal,
        children: <Widget>[
            //固定宽度50,剩余区域按比例分配
            Container(
              width: 50,
              height: 300,
              color: Colors.black,
            ),
            Expanded(
              //占几份
              flex: 2,
              child: Container(
                height: 300,
                color: Colors.blue,
              ),
            ),
            Expanded(
              //占几份
              flex: 1,
              child: Container(
                height: 300,
                color: Colors.red,
              ),
            ),
            Expanded(
              //占几份
              flex: 1,
              child: Container(
                height: 300,
                color: Colors.yellow,
              ),
            )
        ],
      )*/
      Flex(
        //方向:纵向Axis.horizontal
        direction: Axis.vertical,
        children: <Widget>[
          //固定宽度50,剩余区域按比例分配
          Container(
            width: 300,
            height: 300,
            color: Colors.black,
          ),
          Expanded(
            //占几份
            flex: 2,
            child: Container(
              width: 300,
              color: Colors.blue,
            ),
          ),
          Expanded(
            //占几份
            flex: 1,
            child: Container(
              width: 300,
              color: Colors.red,
            ),
          ),
          Expanded(
            //占几份
            flex: 1,
            child: Container(
              width: 300,
              color: Colors.yellow,
            ),
          )
        ],
      )
    );
  }

}
